<template>
  <div class="body">
    <div>
      <el-row :gutter="20" class="mgb20">
        <el-col :span="6">
          <div class="card-body">
            <div>
              <i class="el-icon-s-custom card-icon bg1"></i>
            </div>
            <div class="card-content">
              <div class="card-num color1">{{enterCounts}}</div>
              <div>用户开户量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-body">
            <div>
              <i class="el-icon-message-solid card-icon bg2"></i>
            </div>
            <div class="card-content">
              <div class="card-num color2">1111</div>
              <div>系统消息</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-body">
            <div>
              <i class="el-icon-shopping-bag-1 card-icon bg3"></i>
            </div>
            <div class="card-content">
              <div class="card-num color3">{{total_quantity}}</div>
              <div>今日交易总量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-body">
            <div>
              <i class="el-icon-shopping-cart-full card-icon bg4"></i>
            </div>
            <div class="card-content">
              <div class="card-num color4">{{total_amount}}</div>
              <div>今日交易总额</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row class="mg20">
        <el-col :span="18">
          <barwaterfall :dataList="Days11List" :key="Math.random()*100"></barwaterfall>
        </el-col>
        <el-col :span="6">
          <pieborderradius :list="pieDataList"></pieborderradius>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import barwaterfall from "@/components/echarts/BarWaterfall.vue";
import pieborderradius from "@/components/echarts/PieBorderRadius.vue";

import { getDataAnalysisy } from "@/api";

export default {
  name: "IndexView",
  components: {
    barwaterfall,
    pieborderradius,
  },
  data() {
    return {
      enterCounts:0,
      total_quantity:0,
      total_amount:0.00,
      Days11List:[],
      pieDataList:[],
    };
  },
  mounted(){
    this.initData();
  },
  methods:{
    initData(){
      this.getDataAnalysisy();
    },
    async getDataAnalysisy(){
      let res = await getDataAnalysisy();
      console.log(res);
      if(res.code == 200){
        this.enterCounts = res.data.enterCounts;
        this.total_quantity = res.data.total_quantity;
        this.total_amount = res.data.total_amount;
        if(res.data.days11Datas==null){
          this.Days11List = [];
          console.log("null")
          return;
        }
        this.Days11List = res.data.days11Datas;
        this.pieDataList = res.data.enterpriseData;
      }else{

      }
    }
  }
};
</script>

<style scoped>
.mg20 {
  margin-top: 20px;
}
.card-body {
  display: flex;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  padding: 20px;
}

.card-body:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 0 20px;
}

.card-num {
  font-size: 30px;
}

.card-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.bg1 {
  background: #2d8cf0;
}

.bg2 {
  background: #64d572;
}

.bg3 {
  background: #f25e43;
}

.bg4 {
  background: #e9a745;
}

.color1 {
  color: #2d8cf0;
}

.color2 {
  color: #64d572;
}

.color3 {
  color: #f25e43;
}

.color4 {
  color: #e9a745;
}

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}
</style>